
/* 页面头部 */
.page-header {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  margin-bottom: 40rpx;
  /* 精确对齐胶囊按钮 - 往上移动一个位置 */
  padding-top: calc(env(safe-area-inset-top) - 2px);
  /* 与胶囊按钮高度一致 */
  height: 32px;
  position: relative;
  z-index: 100;
  /* 使用flexbox确保垂直和水平居中 */
  justify-content: center;
}

.back-btn {
  width: 64rpx;
  height: 64rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  backdrop-filter: blur(10rpx);
  /* 增加点击区域 */
  position: relative;
  /* 扩大点击区域 */
  &::before {
    content: '';
    position: absolute;
    top: -10rpx;
    left: -10rpx;
    right: -10rpx;
    bottom: -10rpx;
    background: transparent;
  }
  /* 确保与胶囊按钮垂直对齐 */
  align-self: center;
}

.back-icon {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  /* 确保图标居中 */
  line-height: 1;
}

.page-title {
  flex: 1;
  text-align: center;
  /* 确保标题与胶囊按钮垂直对齐 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.title-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  /* 确保文字垂直居中 */
  line-height: 1;
}

/* 添加iOS和Android兼容性样式 */
@supports (padding-top: env(safe-area-inset-top)) {
  .page-header {
    padding-top: calc(env(safe-area-inset-top) - 2px);
  }
}

/* 针对不支持env()的旧版本微信的兼容性处理 */
@supports not (padding-top: env(safe-area-inset-top)) {
  .page-header {
    padding-top: 42px; /* 默认状态栏高度 + 胶囊按钮偏移 - 8px */
  }
}

/* 通用安全区域适配工具类 */
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-top);
}

.safe-area-left {
  padding-left: env(safe-area-inset-left);
}

.safe-area-right {
  padding-right: env(safe-area-inset-right);
}

/* 胶囊按钮对齐工具类 */
.capsule-align {
  padding-right: calc(100vw - 87px);
}

/* 增强点击区域工具类 */
.enhanced-touch {
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: -10rpx;
    left: -10rpx;
    right: -10rpx;
    bottom: -10rpx;
    background: transparent;
  }
}

/* 精确胶囊按钮对齐工具类 */
.capsule-header {
  padding-top: calc(env(safe-area-inset-top) - 2px);
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.capsule-btn {
  width: 64rpx;
  height: 64rpx;
  align-self: center;
}

.capsule-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
